<template>
  <div class="main">
    <el-steps :active="active" finish-status="success">
      <el-step title="菜品基本信息"></el-step>
      <el-step title="菜品基本类型"></el-step>
    </el-steps>

    <div class="content">
       <div v-if="0==active">
           <el-form ref="menu" :model="menu">
               <el-form-item label="菜名">
                     <el-input v-model="menu.foodname" maxlength="5" show-word-limit></el-input>
               </el-form-item>
               <el-form-item label="价格">
                 <el-input v-model="menu.price" maxlength="3" show-word-limit clearable  onkeyup="this.value=this.value.replace(/\D/g,'')"></el-input>
               </el-form-item>
           </el-form>
       </div>
      <div v-else-if="1==active">
        <el-form ref="menu" :model="menu">
          <el-form-item label="类型">
            <el-radio-group v-model="menu.foodtype">
              <el-radio label="干锅">干锅</el-radio>
              <el-radio label="家常">家常</el-radio>
              <el-radio label="蒸菜">蒸菜</el-radio>
              <el-radio label="汤类">汤类</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="btndiv">
      <el-button style="margin-top: 12px;" @click="last">上一步</el-button>
      <el-button v-if="0==active" style="margin-top: 12px;" @click="next">下一步</el-button>
      <el-button :plain="true" v-else-if="1==active" style="margin-top: 12px;" @click="submit('menu')">提交</el-button>
    </div>

  </div>
</template>

<script>

  import {insert} from "@/network/mform"

  export default {
    data() {
      return {
        menu: {
          foodname: '',
          price: '',
          foodtype: ''
        },
        active: 0,
        radio: 4
      };
    },
    methods: {
      next() {
        this.active++
      },
      last() {
        this.active--;
        if(this.active < 0 ){
          this.active = 0;
          this.$message('已经是第一步了！')
        }
      },
      submit (menu) {
        this.$refs[menu].validate((valid) =>{
          if (valid){
            insert(this.menu).then(res => {
              console.log(res)
              if (res.success){
                this.$notify({
                  title: '成功',
                  message: '加入菜品成功',
                  type: 'success',
                });
              } else {
                this.$notify({
                  title: '失败',
                  message: res.data.data,
                  type: 'warning'
                });
              }
            })
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>
  .main {
    width: 800px;
    height: 500px;
    margin: 0 auto;
    position: relative;
  }

  .content {
    width: 600px;
    height: 300px;
    margin: 0 auto;
    margin-top: 150px;
  }

  .btndiv {
    width: 300px;
    height: 50px;
    /*background: #04bdb9;*/
    margin: 0 auto;
    text-align: center;
    bottom: 0px;
    position: absolute;
    left: 30%;
  }


</style>
